<template>
	<div class="createedit">
		<div class="createeditTop">
			<img @click="back" src="../../../../assets/images/后退.png" />
			<span>编辑歌单信息</span>
		</div>
		<div class="mask">

		</div>
		<div class="createeditBottom">
			<ul>
				<div class="libox">
					<li>
						<span>更换封面</span>
						<img :src="imageUrl" />
					</li>
					<div class="inputbox">
						<input type="file" @change="test" class="ImageInput" accept="image/*" name="imagefiles">
					</div>
				</div>
				<li @click="name">
					<span>名称</span>
					<p>{{username}}</p>
				</li>
				<li @click=label>
					<span>标签</span>
					<div class="litagBox">
						<div class="litag" v-for="(item,index) in tags" :key="index">
							<span>
								{{item.name?item.name:item}}
							</span>
						</div>
					</div>
				</li>
				<li @click="description">
					<span>描述</span>
					<p v-if="description2=='null'">暂无描述</p>
					<p v-else>{{description2}}</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: "createedit",
		data() {
			return {
				arr: sessionStorage.getItem("searr") ? JSON.parse(sessionStorage.getItem("searr")) : "",
				imageUrl: sessionStorage.getItem('seimg') ? sessionStorage.getItem('seimg') : "",
				username: sessionStorage.getItem('sename') ? sessionStorage.getItem('sename') : "",
				tags: sessionStorage.getItem('setags') ? JSON.parse(sessionStorage.getItem("setags")) : "",
				description2: sessionStorage.getItem('sedescription') ? sessionStorage.getItem('sedescription') : "",
			}
		},
		components: {

		},
		created() {
			if(this.$route.params.arr3) {
				this.description2 = this.$route.params.arr3
			}
			if(this.$route.params.arr2) {
				this.tags = this.$route.params.arr2
			}
			if(this.$route.params.num) {
				this.username = this.$route.params.num
			}
			if(this.$route.params.arr) {
				console.log(this.$route.params.arr);
				sessionStorage.setItem('searr', JSON.stringify(this.$route.params.arr));
				sessionStorage.setItem('seimg', this.$route.params.arr.coverImgUrl);
				sessionStorage.setItem('sename', this.$route.params.arr.name);
				sessionStorage.setItem('setags', JSON.stringify(this.$route.params.arr.tags));
				sessionStorage.setItem('sedescription', this.$route.params.arr.description);
				this.arr = JSON.parse(sessionStorage.getItem("searr"))
				this.imageUrl = sessionStorage.getItem('seimg')
				this.username = sessionStorage.getItem('sename')
				this.tags = JSON.parse(sessionStorage.getItem('setags'))
				this.description2 = sessionStorage.getItem('sedescription')
			}
		},
		methods: {
			back() {
				this.$router.push({
					name: 'mine'
				})
			},
			//更换图片
			test() {
				var URL = window.URL || window.webkitURL;
				this.imageUrl = URL.createObjectURL($(".ImageInput")[0].files[0]);
			},
			name() {
				this.$router.push({
					name: 'name',
					params: {
						arr: this.arr
					}
				})
			},
			label() {
				this.$router.push({
					name: 'createeditlabel'
				})
			},
			description() {
				this.$router.push({
					name: 'description'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.createedit {
		.createeditTop {
			padding: vw(10) 0 vw(10) vw(20);
			font-size: 0;
			display: flex;
			align-items: center;
			img {
				width: vw(22);
				height: vw(22);
			}
			span {
				margin-left: vw(15);
				font-size: vw(16);
				line-height: vw(16);
				color: #5a5a5a;
			}
		}
		.mask {
			padding-top: vw(10);
			background: #f6f6f6;
		}
		.createeditBottom {
			ul {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 0 vw(18);
				li {
					border-top: 1px solid #fefefe;
					padding: vw(12) 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.litagBox {
						display: flex;
						.litag {
							padding: vw(4) vw(6);
							border: 1px solid #f6f6f6;
							border-radius: vw(10);
							margin-left: vw(8);
							span{
								color: #d0d0d0;
								font-size: vw(12);
							}
						}
					}
					span {
						font-size: vw(16);
						color: #4f4f4f;
					}
					img {
						width: vw(50);
						height: vw(50);
					}
					p {
						
						color: #d0d0d0;
						/*flex-wrap: wrap;*/
					}
					p:nth-child(2){
						width: vw(250);
						word-break:break-all;
						white-space: normal;
						overflow: hidden;
						text-align: right;
					}
				}
				.libox {
					width: 100%;
					height: 100%;
					position: relative;
					.inputbox {
						opacity: 0;
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						/*background: red;*/
						.ImageInput {
							width: 100%;
							height: 100%;
						}
					}
				}
				li:nth-child(2) {
					padding: vw(23) 0;
				}
				li:nth-child(3) {
					padding: vw(15) 0;
				}
				li:nth-child(4) {
					padding: vw(19) 0;
				}
			}
		}
	}
</style>